<template>
	<div id="banner" :class="{'home-banner':isHome}" @mouseenter="drawer=true" @mouseleave="drawer=false">
		<el-drawer :visible.sync="drawer" direction="ttb" :modal="false" :withHeader="false">
			<p class="title">主题花园：{{subject_name}}</p>
		</el-drawer>
		<el-carousel @change="a" indicator-position="outside" :interval="5000">
			<el-carousel-item v-for="(item,index) in subjects">
				<el-image :src="item.image" fit="cover">
					<div slot="error" class="image-slot">
						<i class="el-icon-picture-outline"></i>
					</div>
				</el-image>
				<div class="content" :class="{left:index%2 == 1}">
					{{item.content}}
				</div>
			</el-carousel-item>
		</el-carousel>
		<!-- <div class="banner-img" :style="{'background-image': `url(${src})`}"> -->
		<!-- <template v-if="isHome"> -->
		<!--博主信息-->
		<!-- <div class="focusinfo"> -->
		<!-- 头像 -->
		<!-- <div class="header-tou">
                        <router-link to="/"><img :src="websiteInfo.avatar"></router-link>
                    </div> -->
		<!-- 简介 -->
		<!-- <div class="header-info">
                        <p>{{websiteInfo.slogan}}</p>
                    </div> -->
		<!-- 社交信息 -->
		<!-- <div class="top-social">
                        <div v-for="item in socials" :key="item.id" :title="item.title"><a :href="item.href" target="_blank" :style="{'color':item.color}"><i class="iconfont" :class="item.icon"></i></a></div>
                    </div> -->
		<!-- </div> -->
		<!--左右倾斜-->
		<!-- <div class="slant-left"></div>
                <div class="slant-right"></div> -->
		<!-- </template> -->
		<!-- </div> -->
	</div>
</template>

<script>
	import {
		getSubjects
	} from "@/api/subject.js"
	export default {
		name: "banner",
		data() {
			return {
				websiteInfo: {},
				socials: [],
				subject_name: "",
				subjects: [{
					image: "https://wdz-1258450135.cos.ap-shanghai.myqcloud.com/layuibokemoban/images/theshy.jpg",
					name: "天不生theshy",
					content: "论打线的能力可以说是世界一流的了,对线压力很大,细节很好,但是不知道他的意识怎么样,打线能力肯定是顶尖的。"
				}, {
					image: "https://www.wayblogs.com/layuibokemoban/image/haixi.jpg",
					name: "刮痧女王",
					content: "艾希是费雷尔卓德的一名弓箭手，她攻击目标的时候总能非常有耐心的等待最佳的进攻时机，她用她强大的魔法弓箭寒冰之刃射出去的箭矢总能准确无误的命中目标，这样是大家为什么称为她为强大的魔法射手的原因，在最新的版本当中艾希遭到了母亲死亡的事情和背叛这一残忍的结果，但是艾希一直还是相信着和平。"
				}],
				drawer: false
			}
		},
		props: {
			src: {
				type: String,
				default: 'https://wdz-1258450135.cos.ap-shanghai.myqcloud.com/layuibokemoban/images/theshy.jpg'
			},
			isHome: {
				type: [Boolean, String],
				default: false
			}
		},
		created() {
			this.getWebSiteInfo()
			this.getSocial()
		},
		methods: {
			getSocial() {
				this.$store.dispatch('getSocials').then(data => {
					this.socials = data
				})
			},
			getWebSiteInfo() {
				this.$store.dispatch('getSiteInfo').then(data => {
					this.websiteInfo = data
				})
			},
			a(index) {
				this.subject_name = this.subjects[index].name;
			},
			getSubjects() {
				getSubjects().then(res => {
					this.subjects = res.data;
				})
			}
		},
		created() {
			this.a(0);
			this.getSubjects();
		}
	}
</script>
<style lang="less">
	#banner {
		.el-drawer__wrapper {
			z-index: 8 !important;
			margin-top: 80px;
			position: absolute;
			height: 60px !important;

			.el-drawer {
				height: auto !important;
				line-height: 60px;
				height: 60px !important;
				padding-left: 20px;
				background-color: unset;
				box-shadow: unset;

				.title {
					color: #FFFFFF;
					padding-left: 80px;
				}
			}
		}

		.el-carousel__container,
		.el-carousel--horizontal {
			cursor: pointer;
			height: 100% !important;

			.el-image {
				width: 100%;
			}

			img {
				transition: all 0.2s linear;
				width: 100%;
			}

			img:hover {
				transform: scale(1.1, 1.1);
				-webkit-filter: contrast(130%);
				filter: contrast(130%);
				transition: all 0.2s linear;
			}

			.content {
				position: absolute;
				left: 600px;
				margin-right: 40px;
				bottom: 100px;
				color: #FFFFFF;
				letter-spacing: 2px;
				text-indent: 30px;
				line-height: 30px;
				padding: 5px;

				&:hover {
					background-color: rgba(0, 0, 0, 0.1);
				}
			}

			.left {
				left: unset;
				right: 600px;
				margin-right: unset;
				margin-left: 40px;
			}
		}

		.el-carousel__indicators--outside {
			position: absolute;

			.el-carousel__button {
				width: 10px;
				height: 10px;
				border-radius: 50%;
			}
		}

		.el-carousel__indicators {
			left: 0;
			width: 100%;
			text-align: center;
		}
	}
</style>
<style scoped lang="less">
	#banner {
		position: relative;
		margin-top: 80px;
		width: 100%;

		.banner-img {
			width: inherit;
			height: inherit;
			background-position: center;
			background-size: cover;
			background-repeat: no-repeat;
			transition: all 0.2s linear;
			overflow: hidden;

			&:hover {
				transform: scale(1.1, 1.1);
				filter: contrast(130%);
			}
		}

		&.home-banner {
			height: 600px;

			.banner-img {
				background-position: center center;
				background-repeat: no-repeat;
				/* background-attachment: fixed; */
				background-size: cover;
				z-index: -1;
				transition: unset;

				&:hover {
					transform: unset;
					filter: unset;
				}
			}

			.slant-left {
				content: '';
				position: absolute;
				width: 0;
				height: 0;
				border-bottom: 100px solid #F5F5F5;
				border-right: 800px solid transparent;
				left: 0;
				bottom: 0;
			}

			.slant-right {
				content: '';
				position: absolute;
				width: 0;
				height: 0;
				border-bottom: 100px solid #f5f5f5;
				border-left: 800px solid transparent;
				right: 0;
				bottom: 0;
			}
		}
	}

	.focusinfo {
		position: relative;
		max-width: 800px;
		padding: 0 10px;
		top: 40%;
		left: 50%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		text-align: center;

		img {
			width: 80px;
			height: auto;
			border-radius: 50%;
			border: 3px solid rgba(255, 255, 255, 0.3);
		}

		.header-info {
			width: 60%;
			font-size: 14px;
			color: #EAEADF;
			background: rgba(0, 0, 0, 0.66);
			padding: 20px 30px;
			margin: 30px auto 0 auto;
			font-family: miranafont, "Hiragino Sans GB", STXihei, "Microsoft YaHei", SimSun, sans-serif;
			letter-spacing: 1px;
			line-height: 30px;
		}

		.top-social {
			height: 32px;
			margin-top: 30px;
			margin-left: 10px;
			list-style: none;
			display: inline-block;
			font-family: miranafont, "Hiragino Sans GB", STXihei, "Microsoft YaHei", SimSun, sans-serif;

			div {
				float: left;
				margin-right: 10px;
				height: 32px;
				line-height: 32px;
				text-align: center;
				width: 32px;
				background: white;
				border-radius: 100%;
			}
		}
	}

	/* @media (max-width: 960px) {
		#banner {
			height: 400px;
		}
	}

	@media (max-width: 800px) {
		#banner {
			display: none;
		}
	} */
</style>
<style lang="less">
	@media screen and (max-width: 1024px) {
		#banner .el-drawer__wrapper {
			margin-top: 45px;
			height: 30px !important;

			.el-drawer {
				height: 30px !important;

				.title {
					padding: 5px;
					font-size: 12px;
					line-height: 12px;
				}
			}
		}
	}
</style>
